<template>
	<view class="kind-list">
		<view class="kind-nav">
			<view :class="{active:navIndex === index}" class="nav-item" v-for="(item,index) in navList" :key="index" @tap="clickNav(item,index)">
				{{item.name}}
				<template v-if="item.isSort">
					<view class="icon-holder">
						<uni-icons class="icon-child" type="arrowup" size="12" :color="navIndex === index&&item.desc === 0?'#dd524d':'#fff'"></uni-icons>
						<uni-icons class="icon-child" type="arrowdown" size="12" :color="navIndex === index&&item.desc === 1?'#dd524d':'#fff'"></uni-icons>
					</view>
				</template>
			</view>
		</view>
		
		<view class="list" v-if="goodsList.length==0">
			数据为空
		</view>
		
		<view class="list" v-else>
			<view class="item" v-for="item in goodsList" :key="item.id" @tap="toGoodsInfo(item.id)">
				<image :src="item.pic" mode=""></image>
				<view class="text-holder">
					<view class="text">
						{{item.name}}
					</view>
					<view class="price">
						<text>￥{{item.price}}</text>
						<text>乐居</text>
					</view>
				</view>
			</view>
			
			<view class="center">
				<text v-if="hasMore">下拉加载更多</text>
				<text v-else>没有更多数据了</text>
			</view>
		</view>
		
		
		
		
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {
		requestGoodsList
	} from 'api/kind/kind-list.js';
	export default {
		data() {
			return {
				hasMore:false,
				goodsList: [],
				navIndex: 0,
				info: {
					start: 0,
					limit: 5
				},
				kindId: '',
				query: {
					"brandId": "",
					"categoryId": "",
					"isDesc": 0,
					"keywords": "",
					"sortBy": ""
				},
				navList: [{
						name: '新品',
						isSort: false,
						desc: 1,
						type: '',
					},
					{
						name: "销量",
						isSort: true,
						desc: 1,
						type: 'sale',
					},
					{
						name: '价格',
						isSort: true,
						desc: 1,
						type: 'price',
					},
					{
						name: '筛选',
						isSort: false,
						desc: 1,
						type: 'sort',
					},
				]
			}
		},
		methods: {
			getGoodsList(isRefresh) {
				requestGoodsList(this.info, this.query).then(res => {
					console.log(res);
					this.hasMore = res.data.total>this.info.limit;
					this.goodsList = res.data.rows;
					if (isRefresh) {
						uni.stopPullDownRefresh();
					}
				})
			},
			clickNav(item, index) {
				this.query.sortBy = item.type;
				this.navList.forEach((val) => {
					(val.name != item.name) && (val.desc = 1);
				});
				this.navIndex = index;
				if (item.isSort) {
					this.query.isDesc = item.desc;
					item.desc = item.desc === 1 ? 0 : 1;
				}
				this.getGoodsList();
			},
			toGoodsInfo(id) {
				uni.navigateTo({
					url: `/pages/goodsInfo/goodsInfo?goodsId=${id}`,
				})
			},
		},
		onPullDownRefresh() {
			this.getGoodsList(true);
		},
		onReachBottom() {
			console.log(1);
			this.info.limit += 2;
			this.getGoodsList(false)
		},
		onShow() {
			this.getGoodsList();
		},
		onLoad: function(option) {
			// console.log(option);
			this.query.categoryId = option.kindId;
		},
		components: {
			uniIcons
		}
	}
</script>

<style lang="scss" scoped>
	.kind-list {
		.kind-nav {
			position: fixed;
			padding-top: 14rpx;
			z-index: 10;
			display: flex;
			justify-content: space-around;
			height: 62rpx;
			width: 100%;
			background-color: #354E44;
			color: #fff;
			font-size: 30rpx;
			line-height: 62rpx;

			.nav-item.active {
				color: #dd524d;
			}

			.nav-item {
				display: flex;
				align-items: center;

				.icon-holder {
					height: 40rpx;
					width: 20rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					margin-left: 6rpx;
					line-height: 31rpx;
					text-align: center;

					.icon-child {
						font-weight: 700;
						height: 16rpx;
						display: flex;
						align-items: center;

						/deep/ span {
							height: 100%;
							display: flex;
						}
					}
				}
			}
		}


		.list {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			flex-wrap: wrap;
			padding: 100rpx 40rpx 40rpx 40rpx;
			width: 100%;

			.item {
				margin: 20rpx 0;
				width: 324rpx;
				height: 416rpx;
				background-color: #fff;

				image {
					width: 100%;
					height: 238rpx;
				}

				.text-holder {
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;
					padding: 30rpx;
					width: 100%;
					height: 170rpx;

					.text {
						width: 100%;
						font-weight: 700;
						font-size: 26rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.price {
						width: 100%;
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
					}
				}
			}
			
			.center{
				width: 100%;
				text-align: center;
				padding-bottom: 50rpx;
			}
		}
		
		
	}
</style>
